import * as React from "react";

import type { SlateElementProps, TTableCellElement, TTableElement } from "platejs";

import { BaseTablePlugin } from "@platejs/table";
import { SlateElement } from "platejs";

import { cn } from "@/utils/cn";

export function TableElementStatic({ children, ...props }: SlateElementProps<TTableElement>) {
  const { disableMarginLeft } = props.editor.getOptions(BaseTablePlugin);
  const marginLeft = disableMarginLeft ? 0 : props.element.marginLeft;

  return (
    <SlateElement {...props} className="overflow-x-auto py-5" style={{ paddingLeft: marginLeft }}>
      <div className="group/table relative w-fit">
        <table className="ml-px mr-0 table h-px table-fixed border-collapse">
          <tbody className="min-w-full">{children}</tbody>
        </table>
      </div>
    </SlateElement>
  );
}

export function TableRowElementStatic(props: SlateElementProps) {
  return (
    <SlateElement {...props} as="tr" className="h-full">
      {props.children}
    </SlateElement>
  );
}

export function TableCellElementStatic({
  isHeader,
  ...props
}: SlateElementProps<TTableCellElement> & {
  isHeader?: boolean;
}) {
  const { editor, element } = props;
  const { api } = editor.getPlugin(BaseTablePlugin);

  const { minHeight, width } = api.table.getCellSize({ element });
  const borders = api.table.getCellBorders({ element });

  return (
    <SlateElement
      {...props}
      as={isHeader ? "th" : "td"}
      className={cn(
        "bg-background h-full overflow-visible border-none p-0",
        element.background ? "bg-(--cellBackground)" : "bg-background",
        isHeader && "text-left font-normal *:m-0",
        "before:size-full",
        "before:absolute before:box-border before:select-none before:content-['']",
        borders &&
          cn(
            borders.bottom?.size && `before:border-b-border before:border-b`,
            borders.right?.size && `before:border-r-border before:border-r`,
            borders.left?.size && `before:border-l-border before:border-l`,
            borders.top?.size && `before:border-t-border before:border-t`,
          ),
      )}
      style={
        {
          "--cellBackground": element.background,
          maxWidth: width || 240,
          minWidth: width || 120,
        } as React.CSSProperties
      }
      attributes={{
        ...props.attributes,
        colSpan: api.table.getColSpan(element),
        rowSpan: api.table.getRowSpan(element),
      }}
    >
      <div className="relative z-20 box-border h-full px-4 py-2" style={{ minHeight }}>
        {props.children}
      </div>
    </SlateElement>
  );
}

export function TableCellHeaderElementStatic(props: SlateElementProps<TTableCellElement>) {
  return <TableCellElementStatic {...props} isHeader />;
}
